<script lang="ts">
import ChangePassword from "@/layout/components/changePassword/index.vue";
export default {
  components: {
    ChangePassword
  }
};
</script>

<script lang="ts" setup>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import InitHook from "./composables/InitHook";
import ModifyPassword from "./composables/modifyPassowrd";
const { formState, staticResource, dialogOpts } = InitHook();
const { onFinish, init, onFinishFailed } = ModifyPassword({ dialogOpts, formState, staticResource });
init();
</script>
<template>
  <div class="login-page" :style="{ background: `url(${staticResource.logoBg}) no-repeat`, backgroundSize: `100% 100%` }">
    <div class="login-form">
      <div class="logo">
        <!-- <img src="../../assets/img/login-logo.png" alt="登录login" /> -->
        <img :src="staticResource.logoLogin" alt="登录login" />
      </div>
      <!-- <div class="title">安速货运</div> -->
      <a-form :model="formState" name="basic" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item>
          <a-radio-group v-model:value="formState.clientType" button-style="solid">
            <a-radio-button value="CUSTOMER">客户端</a-radio-button>
            <a-radio-button value="MANAGE">管理后台</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
          <a-input v-model:value="formState.username" placeholder="请输入用户名">
            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
        </a-form-item>
        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="formState.password" placeholder="请输入密码">
            <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button style="width: 100%" type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData"></component>
    </a-modal>
  </div>
</template>
<style lang="stylus" scoped>
.login-page{
  :deep(.ant-radio-group){
      width 100%


      .ant-radio-button-wrapper:first-child{
        border-radius: 8px 0px 0px 8px;
      }

      .ant-radio-button-wrapper:last-child{
        border-radius: 0px 8px 8px 0px;
      }

      .ant-radio-button-wrapper{
        width:50%;
        text-align:center
      }
  }
  height: 100%;
  width: 100%;
  // background: url('@/assets/img/login-logo-new.png') no-repeat;
  // background-size: 100% 100%;
  overflow: hidden;
  .login-form{
    font-weight: bold;
    .logo {
      height: 200px;
      text-align: center;
      padding-bottom: 12px;
      > img {
        height: 100%;
      }
    }
    >header{
      font-size: 26px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    position: relative;
    width: 500px;
    min-height: 320px;
    box-sizing: border-box;
    padding: 27px 60px 25px 60px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -40%, 0);
    border:1px solid #ccc;
    border-radius: 5px;
    .tip{
      font-size: 14px;
      margin-right: 16px;
    }
    .title{
      font-size: 26px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 24px;
    }
  }
}
</style>
